<template>
  <view class="topContains">
    <u-sticky customNavHeight="0">
      <view class="topConter pa-2">
        <view class="pt-5 d-flex align-center justify-space-between">
          <u--image
            src="https://tse4-mm.cn.bing.net/th/id/OIP-C.i1SAc50zkf7MW967RCNRMwAAAA?w=172&h=180&c=7&r=0&o=5&pid=1.7"
            shape="circle"
            width="30px"
            height="30px"
            @click="leftShowtab = true"
          ></u--image>
          <!-- @click="handleTestTo"  -->
          <view class="daiTit d-flex align-center" @click="todayTodoTo">
            待办订单
            <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
          </view>
          <view class="rightIcon" @click="toMessage">
            <u-icon name="chat" size="22" color="#fff"></u-icon>
          </view>
        </view>
        <view class="mt-2">
          <u-tabs
            :list="list1"
            lineHeight="2"
            lineColor="#fff"
            :activeStyle="{
              color: '#FFF',
              fontWeight: 'bold',
              transform: 'scale(1.05)',
            }"
            :inactiveStyle="{
              color: '#fff',
              fontSize: '28rpx',
              transform: 'scale(1)',
            }"
            @change="changeTab"
            :current="tabIndex"
          >
            <view
              slot="right"
              class="px-2"
              @click="(showSearchModal = !showSearchModal), (cunnect = 0)"
            >
              <u-icon name="search" size="22" color="#fff"> </u-icon>
            </view>
          </u-tabs>
        </view>
      </view>
    </u-sticky>
    <!-- 列表内容 -->
    <template>
      <view class="centerListstyle" v-if="childList.length > 0">
        <view
          class="notice mx-3 my-2 px-2 bg-white rounded-5 d-flex align-center justify-space-between"
        >
          <view class="d-flex align-center py-1">
            <u-icon name="volume-fill" size="12"></u-icon>
            <text class="font-12 mx-2"
              >请在2小时内预约客户,以免影响预约及时率</text
            >
          </view>
          <u-icon name="arrow-right" size="8"></u-icon>
        </view>
        <view class="d-flex align-center u-flex-wrap mx-3 mt-2">
          <u-tag
            class="mr-2"
            size="mini"
            v-for="(item, index) in childList"
            :key="index"
            :text="item.chilName"
            plainFill
            :bgColor="item.chilNal == chilNalOne ? '#e6f7ff' : '#FFF'"
            :color="item.chilNal == chilNalOne ? '#069AFA' : '#000'"
            :borderColor="item.chilNal == chilNalOne ? '#069AFA' : '#FFF'"
            :name="index"
            @click="radioClick(item)"
          >
          </u-tag>
        </view>
      </view>
		<view class="pb-15" v-if="orderData.length>0">
			<view class="bg-white mx-3 my-2 pa-2 rounded-5 centerStyle" v-for="(item,index) in orderData" :key="index">
			  <view class="d-flex">
				 <view class="itemList">
					<u--image
					  width="80px"
					  height="80px"
					  radius="6"
					  src="https://cdn.uviewui.com/uview/album/1.jpg"
					></u--image>
				 </view>
				 <view class="ml-2 itemListRight">
					<view class="d-flex align-start justify-space-between">
					  <view class="font-bold font-15">家具维修</view>
					  <view class="d-flex flex-column align-center">
						 <u-icon name="thumb-down" size="16"></u-icon>
						 <view class="font-10 color999"> 不感兴趣 </view>
					  </view>
					</view>
					<view class="d-flex mb-1">
					  <u-tag v-if="item.source==1" text="家庭" size="mini" type="warning"></u-tag>
					  <u-tag v-if="item.source==2" text="总包" plain size="mini" type="success"></u-tag>
					  <u-tag v-if="item.source==3" text="商家" plain size="mini" type="error"></u-tag>
					</view>
					<view class="d-flex align-center">
					  <u-icon name="map" size="14"></u-icon>
					  <text class="font-12 color999 text-ellipsis"
						 >{{item.userAddress}}</text
					  >
					</view>
					<view class="d-flex align-center">
					  <u-icon name="bell" size="14"></u-icon>
					  <text class="font-12 color999 text-ellipsis"
						 v-if="item.expectedTimeScope!=''">在{{item.expectedDate| timetrans(2)}}{{item.expectedTimeScope}}上门服务</text
					  >
					  <text class="font-12 color999 text-ellipsis" v-else>上门时间与客户协商</text
					  >
					</view>
				 </view>
			  </view>
			  <view class="d-flex align-center justify-space-between mt-4">
				 <view class="color999 font-12"> 距离常住地直线约 {{Math.round(item.distance)}} 公里 </view>
				 <view style="width: 180rpx">
					<u-button
					  type="primary"
					  text="去报价"
					  size="small"
					  @click="toOffer(item.id)"
					></u-button>
				 </view>
			  </view>
			</view>
			<u-loadmore :status="status" nomoreText="没有更多了" loading-text='"正在加载...' v-show="loadingShow" />
		</view>
      <view class="mt-16" v-else>
        <u-empty mode="order" :text="radioEmpty.content" textColor="#000">
        </u-empty>
        <view class="colorb2 font-12 mt-2 px-4 text-center">
          {{ radioEmpty.explain }}
        </view>
      </view>
    </template>
    <!-- 未入驻 -->
    <!-- 	<template>
		<view class="centerMan">
		  <u-empty
		    mode="order"
		    text="完成入驻后,平台将为您推送订单."
		    textColor="#666"
		  ></u-empty>
		  <view class="centerBtn">
		    <view class="title"> 限时享新人权益 </view>
		    <u-button
		      class="custom-style"
		      type="primary"
		      :plain="true"
		      :hairline="true"
		      text="立即入驻"
		    ></u-button>
		  </view>
		</view>
	</template> -->

    <!-- 底部内容 -->
    <view
      class="bottomCenter px-4 py-2 bg-white d-flex align-center justify-space-between"
    >
      <view class="text-center">
        <text class="iconfont icon-shijian font-17 color000"></text>
        <view class="font-13"> 报价记录 </view>
      </view>
      <view class="text-center" @click="handleOrderConfirm">
        <text class="iconfont icon-shezhi font-20 color000"></text>
        <view class="font-13"> 接单设置 </view>
      </view>
      <view class="botm-list font-15 color000"> 刷新列表 </view>
    </view>

    <!-- 左侧弹窗 -->
    <u-popup
      :zIndex="10099"
      :show="leftShowtab"
      mode="left"
      @close="leftShowtab = false"
      :customStyle="{ minWidth: '320px' }"
      :overlayStyle="{
        zIndex: '10090',
      }"
    >
      <view class="leftPopup">
        <IndexTabbar
          @close="leftShowtab = false"
          :userInfo="userInfo"
        ></IndexTabbar>
      </view>
    </u-popup>

    <!-- search Popup -->
    <search-modal :show.sync="showSearchModal">
      <view v-show="cunnect == 0" class="pa-4">
        <u--input
          disabled
          placeholder="订单编号/客户姓名/电话"
          prefixIcon="search"
          border="none"
          prefixIconStyle="font-size:44rpx;color: #000"
          placeholderStyle="font-size:26rpx;padding-left:20rpx;font-weight: 500;"
          customStyle="padding:12rpx; border-radius: 16rpx;"
        ></u--input>
        <view class="mt-2">
          <u-row gutter="10" customStyle="margin-bottom: 10px;flex-wrap: wrap;">
            <u-col
              span="4"
              v-for="(item, index) in list2"
              :key="index"
              @click="cathIten(item)"
            >
              <view
                class="bg-f7 text-center py-2 my-1 color000 font-13 font-weight-500"
              >
                {{ item.name }}
              </view>
            </u-col>
          </u-row>
        </view>
      </view>
      <view v-show="cunnect == 1"> 这是第二个 </view>
    </search-modal>
  </view>
</template>

<script>
import { getPushOrderPage } from "@/api/order";

import { list1, moreService } from "../../utils/enum";
import { getUserInfo } from "../../api/userInfo";
import SearchModal from "../../component/popupCom/SearchModal.vue";
import IndexTabbar from "@/component/indexTabbar/IndexTabbar.vue";
export default {
  components: { SearchModal, IndexTabbar },
  data() {
    return {
      cunnect: 0, //当前选择的筛选选项
      leftShowtab: false,
      tabIndex: 0, //当前选中的tab
      list1: list1,
      list2: moreService,
      showSearchModal: false,

      // 子集
      childList: [],
      chilNalOne: 0,
      radioEmpty: {},
      childlistFirst: [
        {
          chilName: "推荐",
          chilNal: 0,
          content: "暂无客户订单",
          explain: "",
        },
        {
          chilName: "更多订单",
          chilNal: 1,
          content: "暂无客户订单",
          explain: "",
        },
        {
          chilName: "我的菜单",
          chilNal: 2,
          content: "暂无客户订单",
          explain: "",
        },
      ],
      userInfo: {},
		loadingShow:false,
		status: 'loading',
		// 订单接口参数
		parmas:{
			pageNo:1,
			pageSize:5,
			orderStatus:'',
			modeList:1,
		},
		orderTotal:0,
		orderData:[], //列表数据
    };
  },
  computed: {},
  onLoad() {
    // console.log(uni.getStorageSync("userdata"), "--");
    this.getUserBasicInfo();
	 this.getOrder();
    this.childList = this.childlistFirst;
  },
  methods: {
	  // 获取订单状态
		async getOrder() {
		  try {
			 const res = await getPushOrderPage(this.parmas);
			 if(this.parmas.pageNo>1){
				this.orderData = this.orderData.concat(res.data.list);
			} else{
				this.orderData = res.data.list;
			}
			 this.orderTotal = res.data.total;
		  } catch (err) {
			 console.log(err);
		  }
		},
    // 获取用户基本信息
    async getUserBasicInfo() {
      try {
        const res = await getUserInfo();
        console.log(res, "00---");
        this.userInfo = res.data;
        // console.log(res, "00---");
      } catch (e) {
        console.log(e);
      }
    },
    changeTab(e) {
		 // 恢复默认页数
		this.parmas.pageNo=1;
		this.orderData = [];
      this.chilNalOne = 0;
      this.showSearchModal = false;
      if (e.children) {
        this.childList = this.list1[e.index].children;
        this.radioEmpty = this.list1[e.index].children[0];
      } else {
        this.childList = this.childlistFirst;
      }
    },
    cathIten(event) {
      this.tabIndex = event.val;
      if (this.list1[event.val].children) {
        this.childList = this.list1[event.val].children;
        this.radioEmpty = this.list1[event.val].children[0];
      } else {
        this.childList = this.childlistFirst;
      }
      this.chilNalOne = 0;
      this.showSearchModal = false;
    },
    // 子集
    radioClick(item) {
      this.chilNalOne = item.chilNal;
      this.radioEmpty = item;
    },
    //
    handleTestTo() {
      uni.navigateTo({
        url: "/pages/drawerPage/purse/purse",
      });
    },
    todayTodoTo() {
      uni.navigateTo({
        url: "/pages/home/todayTodo",
      });
    },
    toMessage() {
      uni.navigateTo({
        url: "/pages/home/message/message",
      });
    },
    toOffer(id) {
      uni.navigateTo({
        url: "/pages/home/offer/index?orderId=" + id,
      });
    },
    handleOrderConfirm() {
      uni.navigateTo({
        url: "/pages/home/order/confirmSuccess",
      });
    },
	 //下滑分页操作
	scrolltolower() {
		this.loadingShow=true;
		if (this.orderTotal > this.parmas.pageNo * this.parmas.pageSize) {
			this.parmas.pageNo++;
			this.getOrder()
		} else {
			this.status = 'nomore'
		}
	},
  },
  // 触底操作
  onReachBottom() {
		this.scrolltolower()
	},
};
</script>

<style scoped>
::v-deep .u-sticky {
  z-index: 10090 !important;
}
</style>
<style lang="scss" scoped>
// ::v-deep .u-popup__content{
// 	width: 80%;
// }
.topConter {
  // height: 200rpx;
  background: linear-gradient(to right, #19b3f3, #069afa);
  box-sizing: border-box;
  .daiTit {
    font-size: 26rpx;
    color: #fff;
    border-radius: 30rpx;
    box-shadow: 1rpx 2rpx 6rpx 1rpx rgba(0, 0, 0, 0.1);
    background: linear-gradient(to right, #37b2f2, #069afa);
    padding: 10rpx 16rpx;
  }
  .rightIcon {
    padding: 10rpx;
    border-radius: 50%;
    background: #29aafd;
    box-shadow: 1rpx 2rpx -5rpx 1rpx rgba(0, 0, 0, 0.1);
  }
}
.centerMan {
  margin-top: 200rpx;
  .centerBtn {
    margin-top: 40rpx;
    position: relative;
    .title {
      position: absolute;
      top: -18rpx;
      right: 160rpx;
      z-index: 88;
      color: #fff;
      font-size: 20rpx;
      border-radius: 8rpx;
      padding: 4rpx 10rpx;
      background: red;
    }
    .custom-style {
      color: $u-primary;
      width: 400rpx;
    }
  }
}

.bottomCenter {
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  bottom: 0;
  .botm-list {
    border-radius: 8rpx;
    border: 1rpx solid #b2b2b2;
    padding: 14rpx 130rpx;
  }
}

.centerListstyle {
  .notice {
  }
}
.centerStyle {
  .itemList {
    flex: 1;
  }
  .itemListRight {
    flex: 9;
    .text-ellipsis {
      width: 100%;
      max-width: 460rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
